#productBasic.indexTable.productBasic {
  &.expandTable{
    .el-form.pb_form{
      height: 96px;
      transition: height .4s ease-in-out 0s;
     }
    }
  &.tableExpand{
    .el-form.pb_form{
      height: 32px;
    }
  }
  .dialog_index{
    .banner_title{
      color: #303030;
        margin-bottom: 16px;
        font-weight: bold;
    }
    .el-form .el-form-item__label{
      width: 112px;
    }
    
    .el-form .el-form-item__content{
      width: calc(100% - 112px);
    }

  } 
    // 旧图文编辑
  .dialog_image{
    .el-tabs__item{
      float: left;
      display: block;
    }
    .el-tabs__content{
      top: 57px;
    }
    .specItem{
      .title{
        display: flex;
        align-content: center;
        justify-content: space-between;
        height: 32px;
        margin: 24px  0;
        >p{
          display: flex;
        }
        >span{
          color: #303030;
          font-size: 14px;
          font-weight: bold;
        }
        .el-button{
          width: 112px;
        }
        .el-button + .el-button{
          margin-left: 8px;
        }

      }
    }
    .el-form .el-form-item__content{
      width: calc(100% - 68px);
      margin-left: 0px !important;
    }
    .specList {
     
      .upload-banner{
        padding: 203px  0px;
        border: 1px dashed #CCCCCC;
        text-align: center;
        position: relative;
        .tip{
          position: absolute;
          bottom: 24px;
          text-align: center;
          color: #CCCCCC;
          font-size: 14px;
          margin-top: 16px;
          padding: 0 24px;
        }
        >.el-button{
          margin-top: 16px;
        }
      }
    }
    .el-dialog__body{
      overflow: auto;
    }
    .specParanet{
      margin-bottom: 24px;
      &:last-of-type{
        margin-bottom: 0;
      }
    }
    .specListItem{
      width: 262px;
      min-height: 487px;
      display: inline-block;
      vertical-align: top;
      border-radius: 8px;
      margin-left: 24px;
      margin-bottom: 24px;
      &:nth-of-type(4n+1){
        margin-left: 0;
      }
      .imgShow{
        position: relative;
        width: 262px;
        height: 262px;
        border: 1px dashed #CCCCCC;
        border-radius: 8px;
        overflow: hidden;
        .el-image{
          width: 100%;
          height: 100%;
          img{
            object-fit: contain;
          }
        }
        .el-button.del_item{
          position: absolute;
          top: 8px;
          right: 8px;
          z-index: 10;
        }
        .color_show{
          height: 25px;
          width: 25px;
          position: absolute;
          bottom: 8px;
          right: 8px;
          border-radius: 50%;
          z-index: 100;
          box-shadow: 0px 1px 3px rgba(30, 30, 30, 0.3) inset;
        }
      }
      .el-input{
        margin-top: 24px;
      }
      .color_picker{
        padding: 0;
        .el-color-picker{
          top: 24px;
          width: 100%;
          .el-color-picker__trigger{
            position: absolute;
            right: 0;
          }
        }
        p.color_show{
          top: 30px;
          left: 12px;
          width: 80%;
        }
      }
    }
  }
  .imageText{
    &:first-of-type {
      .title{
        margin: 24px  0 4px;
      }
    }
    .title{
      display: flex;
      align-content: center;
      justify-content: space-between;
      // height: 32px;
      margin: 32px  0 4px;
      >p{
        display: flex;
      }
      >span{
        color: #303030;
        font-size: 14px;
        font-weight: bold;
      }
      .el-button{
        width: 112px;
      }
      .el-button + .el-button{
        margin-left: 8px;
      }
    }
    .imgTextItem{
      >div{
        float: left;
      }
      .upload-image{
        border: 1px dashed #CCCCCC;
        width: 258px;
        height: 194px;
        padding: 65px  0;
        text-align: center;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        >.el-button{
          margin-top: 16px;
          margin-left: 16px;
        }
        .el-button {
          z-index: 1;
          position: relative;
        }
        .tip{
          position: absolute;
          bottom: 24px;
          text-align: center;
          color: #CCCCCC;
          font-size: 14px;
          margin-top: 16px;
          padding: 0 24px;
        }
        .pop_container{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .el-image{
            width: 100%;
            height: 100%;
            img{
              height:  100%;
              object-fit: cover;
            }
          }
        }
      }
      .inputWord{
        width: calc(100% - 289px);
        margin-left: 24px;
        .el-textarea{
          margin-top: 24px;
        }
      }
    }
  }
  // 站点固定住
  .site_fixed{
    .el-dialog__body{
      padding: 0 48px;
    }
    .el-form{
      .el-tabs__header.is-top{
        position: fixed;
        width: 600px;
        background-color: #fff;
        z-index: 2021;
        border: none;
        padding: 24px 0;
        margin: 0;
        >.el-tabs__nav-wrap.is-top {
          border-bottom: 1px solid #E4E7ED;
        }
      }
      .el-tabs__content {
        top: 81px;
      }
    }
  }
  .input_formitem,
  .output_formitem{
    margin-bottom: 0;
  }
  .input_container,
  .output_container{
    overflow: hidden;
    >div{
      width: 110px;
      height: 110px;
      border:1px solid #CDCDCD;
      border-radius:8px;
      float: left;
      text-align: center;
      margin-right: 13px;
      position: relative;
      margin-bottom: 13px;
      cursor: pointer;
      &:nth-of-type(4n){
        margin-right: 0;
      }
      .el-image{
        width: 56px;
        height: 56px;
        margin-top: 13px;
        img{
          object-fit: contain;
        }
      }
      >p{
        color: #7E7E7E;
        font-size: 14px;
        margin-top: -10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden ;
        text-align: center;
      }
      &.actived{
       border-color: #363434;
       p{
         color: #363434;
       } 
      }
      &.disabled{
        background-color: #F2F1F0;
        p{  color: #F2F1F0;}
        cursor: not-allowed;
        border-color: #F2F1F0;
      }
    }
  }
  // 新图文编辑
  #imageText.dialog_image_new{
    .el-textarea .el-textarea__inner {
      overflow: auto;
    }
    .el-dialog__body{
      overflow: hidden;
      .el-tabs__header.is-top{
        width: 1128px;
      }
    }
    .el-form{
      height: 100%;
      .el-tabs{
        height: 100%;
        .el-tabs__content{
          height: calc(100% - 80px);
          >div{
            height: 100%;
            .imageText{
              height: 100%;
            }
          }
        }
      }
    }
    .el-tabs__item{
      float: left;
      display: block;
    }
    .el-tabs__content{
      top: 81px;
    }
    .module_style,
    .module_preview{
      display: inline-block;
      height: calc(100% - 24px);
      vertical-align: top;
      >p{
        color: #363434;
        font-size: 14px;
        margin-bottom: 6px;
      }
    }
    .module_preview{
      width: 312px;
      .module_preview_content{
        border: 1px solid #F2F1F0;
        overflow: auto;
        height: calc(100% - 25px );
        >div{
          cursor: pointer;
          padding: 16px;
          position: relative;
          &.active {
            background-color: #F9F9F9;
            .icon_delete {
              .icon-delect_normal {
                // color: #B75646;
              }
            }
          }
          &:hover{
            background-color: #F9F9F9;
            .icon_delete {
              .icon-delect_normal {
                color: #B75646;
              }
            }
          }
          
          .icon_delete{
            position: absolute;
            right: 8px;
            top: 3px;
            color: #7E7E7E;
            z-index: 10;  
            font-size: 16px;
            .icon-delect_normal {
              color: #EAEAEA;
            }
            // >svg{
            //   width: 16px;
            //   height: 16px;
            //   cursor: pointer;
            //   &.icon-delect_normal{
            //     display: inline-block;
            //   }
            //   &.icon-delect_hover{
            //     display: none;
            //   }
            // }
            // &:hover{
              // .icon-delect_hover{
              //   display: inline-block;
              // }
              // .icon-delect_normal{
              //   display: none;
              // }
            // }
          };
          
          // &:hover{
            
          // }
        }
      }
    }
    .module_style{
      width: 792px;
      margin-left: 24px;
      .module_style_content{
        width: 100%;
        height: calc(100% - 125px);
        margin-top: 24px;
        border: 1px solid #F2F1F0;
        padding: 24px 24px 0;
        overflow: auto;
        >div{
          height: 100%;   
          display: flex;
          align-items: center;
          justify-content: center;  
          >div{
            padding-bottom: 24px;
          }
        }

      }
    }
    
    .module_style .module_style_content{
      .imageTextStyle1-2,
      .imageTextStyle1-1{
        width: 100%;
        >div{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .upload-image{
            width: calc(50% - 8px);
            margin-right: 8px;
            padding-bottom: 33%;
            height: 0;
          }
          .inputWord{
            width: calc(50% - 8px);
            margin-left: 8px;
            height: 100%;
            .el-textarea{
              height: calc(50% - 8px);
              .el-textarea__inner{
                height: 100% !important;
              }
              &:first-of-type{
                margin-bottom: 8px;
              }
              &:last-of-type{
                margin-top: 8px;
              }
            }
          }
  
        }
      }
      .imageTextStyle1-6,
      .imageTextStyle1-5 {
        width: 100%;
        >div{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .upload-image{
            width: calc(40% - 8px);
            margin-right: 8px;
            padding-bottom: 52%;
            height: 0;
          }
          .inputWord{
            width: calc(60% - 8px);
            margin-left: 8px;
            height: 100%;
            .el-textarea{
              height: calc(60% - 8px);
              .el-textarea__inner{
                height: 100% !important;
              }
              &:first-of-type{
                margin-bottom: 8px;
              }
              &:last-of-type{
                margin-top: 8px;
              }
            }
          }
  
        }
      }
      .imageTextStyle1-6,
      .imageTextStyle1-2{
        >div{
          display: flex;
          align-items: center;
          justify-content: center;
          flex-flow:row-reverse;
          width: 100%;
          .upload-image{
            margin-left: 8px;
            margin-right: 0px;
          }
          .inputWord{
            margin-right: 8px;
            margin-left: 0px;

          }
        }
      }
      .imageTextStyle1-4,
      .imageTextStyle1-3{
        width: 60%;
        margin: 0 auto;
        >div{
          width: 100%;
        }
        .upload-image{
          width: 100%;
          height: 0;
          padding-bottom: 50%;
        }
        .inputWord{
          width: 100%;
          .el-textarea{
            margin-top: 16px;
            .el-textarea__inner{
              height: 64px !important;
            }
          }
       
        }
      }
      .imageTextStyle1-4{
        >div{
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-flow: column-reverse;
          align-items: center;
        }
        .inputWord{
          .el-textarea{
            margin-bottom: 16px;
            margin-top: 0;
          }
        }
      }
      .imageTextStyle4-1{
        width: 60%;
        margin: 0 auto;
        >div{
          width: 100%;
        }
        .upload-image{
          width: 100%;
          height: 0;
          padding-bottom: 50%;
        }
        .inputWord {
          display: none;
        }
      }
      .imageTextStyle4-2{
        width: 60%;
        margin: 0 auto;
        >div{
          width: 100%;
        }
        .upload-image{
          display: none;
          width: 100%;
          height: 0;
          padding-bottom: 50%;
        }
        .inputWord{
          .el-textarea{
            margin-bottom: 16px;
            margin-top: 0;
          }
        }
      }
      .imageTextStyle2-3,
      .imageTextStyle2-2,
      .imageTextStyle2-1{
        width: 100%;
        align-items: flex-start;
        >div{
          width: calc(50% - 8px);
          &:first-of-type{margin-right: 8px;}
          &:last-of-type{margin-left: 8px;}
          display: inline-block;
          .upload-image{
            width: 100%;
            height: 0;
            padding-bottom: 75%;
          }
          .inputWord{
            width: 100%;
            .el-textarea{
              margin-top: 16px;
              .el-textarea__inner{
                height: 64px !important;
              }
            }
          }
        }
  
      }
      .imageTextStyle2-2{
        >div{
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-flow: column-reverse;
          align-items: center;
          .inputWord{
            width: 100%;
            .el-textarea{
              margin-top: 0;
              margin-bottom: 16px;
            }
          }
        }
      }
      .imageTextStyle2-3{
        >div:last-of-type{
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-flow: column-reverse;
          align-items: center;
          .inputWord{
            width: 100%;
            .el-textarea{
              margin-top: 0;
              margin-bottom: 16px;
            }
          }
        }
      }
      .imageTextStyle3-2,
      .imageTextStyle3-1{
        width: 100%;
        >div{
          width: calc(33.3% - 10.7px);
          &:first-of-type{margin-right: 8px;}
          &:nth-of-type(2){margin-right: 8px; margin-left: 8px;}
          &:last-of-type{margin-left: 8px;}
          display: inline-block;
          .upload-image{
            width: 100%;
            height: 0;
            padding-bottom: 75%;

            .tip {
              bottom: 6px;
            }
          }
          .inputWord{
            width: 100%;
            .el-textarea{
              margin-top: 16px;
              .el-textarea__inner{
                height: 64px !important;
              }
            }
          }
        }
      }
      .imageTextStyle3-2{
        >div{
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-flow: column-reverse;
          align-items: center;
          .inputWord{
            width: 100%;
            .el-textarea{
              margin-top: 0;
              margin-bottom: 16px;
            }
          }
        }
      }
    }
 
    .module_preview .module_preview_content{
      >div{
        margin-bottom: 16px;
        &:first-of-type{
          margin-top: 16px;
        }
      }
      .imageTextStyle1-6,
      .imageTextStyle1-5,
      .imageTextStyle1-2,
      .imageTextStyle1-1{
        width: 100%;
        >div{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .el-image{
            width: calc(50% - 8px);
            margin-right: 8px;
            padding-bottom: 33%;
            height: 0;
          }
          .inputWord{
            width: calc(50% - 8px);
            margin-left: 8px;
            height: 100%;
          }
        }
      }
      .imageTextStyle1-6,
      .imageTextStyle1-5 {
        .el-image{
          width: calc(25% - 4px) !important;
          margin-right: 8px;
          padding-bottom: 33%;
          height: 0;
          background-position: center;
        }
        .inputWord{
          width: calc(70% - 8px) !important;
          margin-left: 8px;
          height: 100%;
        }
      }
      .imageTextStyle1-6,
      .imageTextStyle1-2{
        >div{
          display: flex;
          align-items: center;
          justify-content: center;
          flex-flow:row-reverse;
          width: 100%;
          .el-image{
            margin-left: 8px;
            margin-right: 0px;
    
          }
          .inputWord{
            margin-right: 8px;
            margin-left: 0px;
    
          }
        }
      }
      .imageTextStyle1-4,
      .imageTextStyle1-3{
        >div{
          width: 100%;
          font-size: 0;
        }
        .el-image{
          width: 100%;
          height: 0;
          padding-bottom: 50%;
        }
        .inputWord{
          text-align: center;
          .title{
            -webkit-line-clamp: 1; 
          }
        }
      }
      .imageTextStyle1-3{
        .inputWord{
          margin-top: 4px;
        }
      }
      .imageTextStyle1-4{
        >div{
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-flow: column-reverse;
          align-items: center;
        }
        .inputWord{
          margin-bottom: 4px;
        }
      }
      .imageTextStyle4-1{
        >div{
          width: 100%;
          font-size: 0;
        }
        .el-image{
          width: 100%;
          height: 0;
          padding-bottom: 50%;
        }
        .inputWord{
          display: none;
        }
      }
      .imageTextStyle4-2{
        >div{
          width: 100%;
          font-size: 0;
        }
        .el-image{
          display: none;
        }
        .inputWord{
          margin-bottom: 4px;
          text-align: center;
        }
      }
      .imageTextStyle2-3,
      .imageTextStyle2-2,
      .imageTextStyle2-1{
        width: 100%;
        align-items: flex-start;
    
        >div{
          width: calc(50% - 8px);
          &:first-of-type{margin-right: 8px;}
          &:last-of-type{margin-left: 8px;}
          display: inline-block;
          .el-image{
            width: 100%;
            height: 0;
            padding-bottom: 75%;
          }
          .inputWord{
            text-align: center;
          }
        }
    
      }
      .imageTextStyle2-1 {
        .inputWord{
          margin-top: 4px;
        }
      }
      .imageTextStyle2-2{
        display: flex;
        align-items: flex-end;
        >div{
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-flow: column-reverse;
          align-items: center;
        }
        .inputWord{
          margin-bottom: 4px;
        }
      }
      .imageTextStyle2-3{
        display: flex;
        align-items: flex-end;
        >div:last-of-type{
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-flow: column-reverse;
          align-items: center;
          .inputWord{
            margin-bottom: 4px;
          }
    
        }
        >div:first-of-type{
          .inputWord{
            margin-top: 4px;
          }
        }
        
      }
      .imageTextStyle3-2,
      .imageTextStyle3-1{
        display: flex;
        width: 100%;
        >div{
          width: calc(33.3% - 10.7px);
          &:first-of-type{margin-right: 8px;}
          &:nth-of-type(2){margin-right: 8px; margin-left: 8px;}
          &:last-of-type{margin-left: 8px;}
          display: inline-block;
          .el-image{
            width: 100%;
            height: 0;
            padding-bottom: 75%;
          }
          .inputWord{
            text-align: center;
          }
        }
      }
      .imageTextStyle3-2{
        align-items: flex-end;
        >div{
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-flow: column-reverse;
          align-items: center;
        }
        .inputWord{
          margin-bottom: 4px;
    
        }
      }
    
    
      .imageTextStyle3-1{
        align-items: flex-start;
        .inputWord{
          margin-top: 4px;
        }
      }
    
      .inputWord{
        width: 100%;
        .title{
          color: #363434;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-weight: 700;
          word-break: break-all;
        }
        .description{
          color: #7E7E7E;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-top: 2px;
          word-break: break-all;
        }
      }
      .el-image{
        &.noImg{
          background-color: #F2F1F0;
        }
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .imageTextStyle3-2,
      .imageTextStyle3-1,
      .imageTextStyle2-3,
      .imageTextStyle2-2,
      .imageTextStyle2-1{
        >div{
          font-size: 0;
        }
        .inputWord{
          .title,
          .description{
            min-height: 32px;
          }
    
        }
      }
    
    }
    // .module_preview .module_preview_content{

    //   .imageTextStyle1-2,
    //   .imageTextStyle1-1{
    //     width: 100%;
    //     >div{
    //       width: 100%;
    //       display: flex;
    //       align-items: flex-start;
    //       justify-content: center;
    //       .el-image{
    //         width: 44%;
    //         padding-bottom: 33%;
    //         height: 0;
    //       }
    //       .inputWord{
    //         width: calc(56% - 16px);
    //         margin-left: 16px;
    //         height: 100%;
    //         .el-textarea{
    //           height: calc(50% - 8px);
    //           .el-textarea__inner{
    //             height: 100% !important;
    //           }
    //           &:first-of-type{
    //             margin-bottom: 8px;
    //           }
    //           &:last-of-type{
    //             margin-top: 8px;
    //           }
    //         }
    //       }
  
    //     }
  
    //   }
    //   .imageTextStyle1-2{
    //     >div{
    //       display: flex;
    //       justify-content: center;
    //       flex-flow:row-reverse;
    //       width: 100%;
    //       .inputWord{
    //         margin-right: 16px;
    //         margin-left: 0px;

    //       }
    //     }
    //   }
    //   .imageTextStyle1-4,
    //   .imageTextStyle1-3{
    //     width: 60%;
    //     margin: 0 auto;
    //     >div{
    //       width: 100%;
    //     }
    //     .el-image{
    //       width: 100%;
    //       height: 0;
    //       padding-bottom: 50%;
    //     }
    //     .inputWord{
    //       width: 100%;
    //       .el-textarea{
    //         margin-top: 16px;
    //         .el-textarea__inner{
    //           height: 64px !important;
    //         }
    //       }
       
    //     }
    //   }
    //   .imageTextStyle1-4{
    //     >div{
    //       display: flex;
    //       flex-direction: column;
    //       justify-content: center;
    //       flex-flow: column-reverse;
    //       align-items: center;
    //     }
    //     .inputWord{
    //       .el-textarea{
    //         margin-bottom: 16px;
    //         margin-top: 0;
    //       }
    //     }
    //   }
    //   .imageTextStyle2-3,
    //   .imageTextStyle2-2,
    //   .imageTextStyle2-1{
    //     width: 100%;
    //     align-items: flex-start;
    //     >div{
    //       vertical-align: top;
    //       width: calc(50% - 8px);
    //       &:first-of-type{margin-right: 8px;}
    //       &:last-of-type{margin-left: 8px;}
    //       display: inline-block;
    //       .el-image{
    //         width: 100%;
    //         height: 0;
    //         padding-bottom: 75%;
    //       }
    //       .inputWord{
    //         width: 100%;
    //         .el-textarea{
    //           margin-top: 16px;
    //           .el-textarea__inner{
    //             height: 64px !important;
    //           }
    //         }
    //       }
    //     }
  
    //   }
    //   .imageTextStyle2-2{
    //     display: flex;
    //     align-items: flex-end;
    //     >div{
    //       display: flex;
    //       flex-direction: column;
    //       justify-content: center;
    //       flex-flow: column-reverse;
    //       align-items: center;
    //       .inputWord{
    //         width: 100%;
    //         .el-textarea{
    //           margin-top: 0;
    //           margin-bottom: 16px;
    //         }
    //       }
    //     }
    //   }
    //   .imageTextStyle2-3{
    //     display: flex;
    //     align-items: flex-end;
    //     >div:last-of-type{
    //       display: flex;
    //       flex-direction: column;
    //       justify-content: center;
    //       flex-flow: column-reverse;
    //       align-items: center;
    //       .inputWord{
    //         width: 100%;
    //         .el-textarea{
    //           margin-top: 0;
    //           margin-bottom: 16px;
    //         }
    //       }
    //     }
    //   }
    //   .imageTextStyle3-2{
    //     align-items: flex-end;

    //   }
    //   .imageTextStyle3-1{
    //     align-items: flex-start;

    //   }
    //   .imageTextStyle3-2,
    //   .imageTextStyle3-1{
    //     display: flex;
    //     width: 100%;
    //     >div{
    //       vertical-align: top;
    //       width: calc(33.3% - 10.7px);
    //       &:first-of-type{margin-right: 8px;}
    //       &:nth-of-type(2){margin-right: 8px; margin-left: 8px;}
    //       &:last-of-type{margin-left: 8px;}
    //       display: inline-block;
    //       .el-image{
    //         width: 100%;
    //         height: 0;
    //         padding-bottom: 75%;
    //       }
    //       .inputWord{
    //         width: 100%;
    //         .el-textarea{
    //           margin-top: 16px;
    //           .el-textarea__inner{
    //             height: 64px !important;
    //           }
    //         }
    //       }
    //     }
    //   }
    //   .imageTextStyle3-2{
    //     >div{
    //       display: flex;
    //       flex-direction: column;
    //       justify-content: center;
    //       flex-flow: column-reverse;
    //       align-items: center;
    //       .inputWord{
    //         width: 100%;
    //         .el-textarea{
    //           margin-top: 0;
    //           margin-bottom: 16px;
    //         }
    //       }
    //     }
    //   }

    //   >div{
    //     margin-bottom: 16px;
    //   }
    //   .inputWord{
    //     .title{
    //       color: #363434;
    //       font-size: 12px;
    //       overflow: hidden;
    //       text-overflow: ellipsis;
    //       display: -webkit-box;
    //       -webkit-line-clamp: 2;
    //       -webkit-box-orient: vertical;
    //     }
    //     .description{
    //       color: #7E7E7E;
    //       font-size: 12px;
    //       overflow: hidden;
    //       text-overflow: ellipsis;
    //       display: -webkit-box;
    //       -webkit-line-clamp: 2;
    //       -webkit-box-orient: vertical;
    //     }
    //   }
    //   .imageTextStyle1-4,
    //   .imageTextStyle1-3{
    //     width: 100%;
    //     margin-bottom: 16px;
    //     .inputWord{
    //       .title{
    //         color: #363434;
    //         font-size: 12px;
    //         overflow: hidden;
    //         text-overflow: ellipsis;
    //         display: -webkit-box;
    //         -webkit-line-clamp: 1;
    //         -webkit-box-orient: vertical;
    //       }
    //     }
    //   }
    //   .imageTextStyle2-1{
    //     vertical-align: top;

    //   }
    //   .el-image{
    //     background-color: #f9f9f9;
    //     background-size: cover;
    //     background-repeat: no-repeat;
    //   }
    // }
    .upload-image{
      border: 1px dashed #CCCCCC;
      text-align: center;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      
      >.el-button{
        margin-left: 16px;
      }
      .el-button {
        z-index: 1;
        position: relative;
      }
      .tip{
        position: absolute;
        bottom: 24px;
        text-align: center;
        color: #CCCCCC;
        font-size: 14px;
        margin-top: 16px;
        padding: 0 24px;
        width: 100%;
        left: 0;
      }
      .upload_btn{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pop_container{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .el-image{
          width: 100%;
          height: 100%;
          img{
            height:  100%;
            object-fit: cover;
          }
        }
      }
    }
    .inputWord{
     
    }

    .swiper{
      // height: 76px;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      .styleItem{
        flex-shrink: 0;
        overflow: hidden;
        cursor: pointer;
        margin-right: 8px;
        height: 100%;
        width: 76px;
        height: 76px;
        >div{
          height: 100%;
          &.active{
            .iconHover{display: block; }
            .iconNormal{ display: none; }
          }
          svg{
            width: 100%;
            height: 100%;
            &.iconNormal{ display: block;}
            &.iconHover{ display: none; }
          }
         
      
        }
        .el-image{
          height: 100% ;
          width: 100%;
        }
      }
      .swiper-container{
        height: 92px;
        width: 100%;
        margin:  0 16px;
      }
    
      .carousel-button-next,
      .carousel-button-prev{
        height: 76px;
        background-color: #FFFFFF;
        border: 1px solid #EBEAEA;
        width: 32px;
        &:hover{
          border: 1px solid #6c7e59;
          i{
            color: #6d6d6d;
          }
        }
        &.disabled{
          cursor: not-allowed;
          background: #FAFAFA;
          border-color: #D5D5D5;
          button {
            cursor: not-allowed;
          }
          i {
            cursor: not-allowed;
            color: #EBEAEA;
          }
        }
      }
      .el-carousel__arrow{
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: translateY(0);
        border-radius: 0;
        background-color: #FFFFFF;
        color: #EBEAEA;
      }
    }

  }
  
}

  

.clearBoth{
  clear: both;
}

#productBasic.indexTable.productBasic  #specfication,
#productBasic.indexTable.productBasic  #imageText{
  &.el-dialog__wrapper > .el-dialog .el-dialog__body{
    padding: 0px 48px;
  }
  .el-tabs--card .el-tabs__header{
    margin: 24px 0;
  }
  .scroll{
    .el-tabs__header.is-top{
      position: fixed;
      width: 1120px;
      background-color: #fff;
      z-index: 2021;
      border: none;
      padding: 24px 0;
      margin: 0;
      >.el-tabs__nav-wrap.is-top {
        border-bottom: 1px solid #E4E7ED;
      }
    }
  }
  .iconbtn{
    // width: 66px;
    height: 32px;
    display: inline-block;
    margin-left: 8px;
    >span{
      width: 32px;
      height: 32px;
      display: inline-block;
      line-height: 32px;
      text-align: center;
      border: 1px solid #CCCCCC;
      cursor: pointer;
      border-radius: 4px;
      &:hover{
        border: 1px solid #303030;
        i{
          color: #303030; 
        }
      }
      i{
        font-size: 16px;
      }
      &:first-of-type{
        margin-right: 4px;
      }
      &.first,
      &.last{
        cursor: not-allowed;
        &:hover{
          border: 1px solid #CCCCCC;
        }
        i{
          color: #EBEAEA;
        }
      }
    }
  }
}


#productBasic.indexTable.productBasic  #specfication, .upload_image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .gallery{
    margin-left: 15px;
  }
}